@mixin sizing {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

@mixin absolute($direction) {
    position: $direction;
}

@mixin height($height) {
    height: $height;
}

@mixin hidden {
    overflow: hidden;
}

@mixin center($center) {
    text-align: $center;
}

@mixin box_flex {
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    display: -webkit-flex;
    /* NEW - Chrome */
}

@mixin direction ($dir:row) {
    // 设置弹性盒子方向
    -webkit-flex-direction: $dir;
    flex-direction: $dir;
}

@mixin flexWrap ($wrap) {
    -webkit-flex-wrap: $wrap;
    flex-wrap: $wrap;
}

@mixin flexFlow ($dir:row, $wrap:wrap) {
    // 方向和换行的结合体
    -webkit-flex-flow: $dir $wrap;
    flex-flow: $dir $wrap;
}

@mixin justify ($justify:center) {
    // 水平居中
    -webkit-justify-content: $justify;
    justify-content: $justify;
}

@mixin align ($align:center) {
    // 垂直居中
    -webkit-align-items: $align;
    align-items: $align;
}

@mixin flex ($grow: 1, $shrink: 1, $basis: 0%) {
    // 
    -webkit-flex: $grow $shrink $basis;
    flex: $grow $shrink $basis;
}

@mixin flex_grow($val) {
    -webkit-flex-grow: $val;
    flex-grow: $val;
}

@mixin flex_shrink($val) {
    -webkit-flex-shrink: $val;
    flex-shrink: $val;
}

@mixin flex_basis($val) {
    -webkit-flex-basis: $val;
    flex-basis: $val;
}

@mixin setBottomLine($c: #C7C7C7) {
    & {
        position: relative;
    }
    &:before {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid $c;
    }
    [data-dpr="1"] &:before {
        transform-origin: 0 0;
        transform: scaleY(0.5);
    }
}

@mixin setTopLine($c: #C7C7C7) {
    & {
        position: relative;
    }
    &:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid $c;
    }
    [data-dpr="1"] &:before {
        transform-origin: 0 0;
        transform: scaleY(0.5);
    }
}